<template>
	<view>

		<block v-for="(item,index) in activityList " :key="item.id">
			<view class="moreActiveContian" :style="{'--ContianPadding':rpxToPx(ContianPadding)}">

				<view class="moreTitle">
					{{item.activityName}}
				</view>
				<view class="v-createTime">
					<view class="createTime">
						<view v-if="item.activityType == 1">有效时间：{{time}}</view>
						<view v-if="item.activityType == 4">有效时间：{{item.cardsettings.validTime}}</view>
						<view v-if="item.activityType == 2 || item.activityType == 3 || item.activityType == 5">
							有效时间：{{item.validTime}}</view>

					</view>
					<!-- 		<image v-if="isDotLine" @click.stop="showDelModify(item.id)" class="threeDot"
						src="../../static/14.png" mode=""></image> -->
					<text class="detailText" @click='openDetail(item)' v-if="!isDotLine">详情 ></text>

				</view>
				<!-- 最多活动列表 -->
				<view class="moreActiveList" v-if="item.releaseChannel==3">


					<view class="getNum">
						<view class="fsNum">
							<text>{{item.newFans}}</text>
							<text>新增粉丝</text>

						</view>
						<view class="dzNum">
							<text>{{item.numberOfLikes}}</text>
							<text>点赞次数</text>

						</view>
						<view class="plNum">
							<text>{{item.numberOfComments}}</text>
							<text>评论次数</text>

						</view>
						<view class="bfNum">
							<text>{{item.timesOfPlay}}</text>
							<text>播放次数</text>

						</view>
					</view>




				</view>
				<!-- // 1 预览活动 2 活动二维码 3 用户数据 4 中奖记录
			     // 抖音视频快推只有 预览活动 活动二维码  快手视频快推有 预览二维码 用户数据 活动二维码
			     // 抖音 九宫格和 大转盘 预览活动 中奖记录 活动二维码 快手 预览活动 中奖记录 活动二维码 用户数据
			     // 抖音 卡卷 预览活动 中奖记录 活动二维码  快手 预览活动 中奖记录 活动二维码 用户数据 -->

				<!-- 最新活动 -->
				<view class="moreActiveFooter" v-if="isNewActivity">
					<view class="actionPur"
						v-if="item.activityType  === 1||item.activityType  === 2||item.activityType  === 3||item.activityType  === 4||item.activityType  === 5"
						@click="openQrCode(item.id,item.qrcode,item.releaseChannel)">
						活动二维码
					</view>
					<!-- 如果是抖音就有 中奖名单 -->
					<view class="actionPur"
						v-if="item.activityType  === 2||item.activityType  === 3||item.activityType  === 4"
						@click="winning(item.id)">
						中奖名单
					</view>
					<!-- 如果是快手就有用户数据 -->
					<view class="userData"
						v-if="item.releaseChannel==3&&(item.activityType  === 1||item.activityType  === 2||item.activityType  === 3||item.activityType  === 4)"
						@click="userDataFn(activityList[index].id,index)">
						用户数据
					</view>
					<!-- 根据不同的页面显示不同的预览活动 -->
					<view class="previewActivity" @click='previewActivityFn(item.activityType,item.id)'
						v-if="item.activityType  === 1||item.activityType  === 2||item.activityType  === 3||item.activityType  === 4||item.activityType  === 5">
						预览活动
					</view>

					<!-- 更多活动 一根线 定位 -->
					<view class="Solid"
						:style="item.releaseChannel === 3 ? { '--activityTop': rpxToPx(298) } : { '--activityTop': rpxToPx(158) }">

					</view>
				</view>

				<!-- 修改 与添加 -->

			</view>
		</block>

		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="qrcode-flex">
					<image class="qrcode" :src="qrcode"></image>
					<view class="tips">请长按二维码保存到手机</view>
				</view>
			</template>
		</sunui-popup>
		<sunui-popup ref="createActivityVideo">
			<template v-slot:content>
				<view class="createVideoContainer">
					<!-- 关闭按钮进行定位 -->


					<view class="createVideoTop">
						<text class="createVideoText">剪辑类型:{{clip_typeList[Number(clip_type)-1]}}</text>

					</view>

					<!-- 输入生成视频的数量 -->
					<view class="createVideoConText">
						<uni-forms-item label="活动生成视频" required name='name'
							style="flex-direction: row;align-items: baseline;" label-width="210rpx">
							<uni-easyinput type="text" v-model="clip_count" placeholder="请输入剪辑数量" />
						</uni-forms-item>

					</view>
					<view class="createVideoButtom">


						<view class="cancal" @click="cancalFn">取消</view>
						<view class="sure" @click="createVideoFn">确定</view>
					</view>
				</view>
			</template>
		</sunui-popup>
		<!-- 修改删除 -->
		<sunui-popup ref="modifyActivity">
			<template v-slot:content>

				<!-- 关闭按钮进行定位 -->
				<view class="moreActiveButton">
					<view class="add" :style="{'--ContianPadding':rpxToPx(ContianPadding)}"
						@click.stop="modify(activity_id)">
						修改
					</view>
					<view class="delete" @click.stop="delActivity(activity_id)">
						删除
					</view>
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		name: "activeDetail",
		props: {

			// 活动列表
			activityList: {
				type: Array,
				default: () => []
			},
			// 是否显示活动预览
			activityPreview: {
				type: Boolean,
				default: false
			},
			// 显示 详情还是 删除修改按钮
			isDotLine: {
				type: Boolean,
				default: false
			},
			// 底部padding添加多少rpx
			ContianPadding: {
				type: Number,
				default: 0
			},
			// 需要在传一个type类型进来
			activityType: {
				type: String,
				default: ''
			},
			// 判断是快手还是抖音
			platform_type: {
				type: Number,
				default: 0
			},
			//  是否是最新活动
			isNewActivity: {
				type: Boolean,
				default: true
			},
			// 视频快推有效时间
			time: {
				type: String,

			}

		},

		data() {
			return {

				// 是否显示修改删除按钮
				isShowDelModify: false,
				// 获取到当前修改删除按钮 id
				activity_id: '',
				// 云剪辑
				clip_typeList: ['云剪辑', '高级模板', '多镜头普通模式'],
				// 剪辑数量
				clip_count: null,
				// 剪辑类型 
				clip_type: '',
				// 三角形适配
				triangleTop: -16,
				triangleRight: 8,
				id: '',
				solidTop: 298,
				activityTop: 158
			};
		},
		created() {

			document.addEventListener("click", e => {


				console.log('========')
				this.activity_id = ''

			});

		},
		onLoad() {
			// 对不同的机型进行修改
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.screenHeight)
					this.screenHeight = res.screenHeight
					this.screenWidth = res.screenWidth
					this.pixelRatio = res.pixelRatio
					console.log(res.screenWidth)
					console.log(res)

					if (res.screenHeight >= 896 && res.screenHeight <= 930 && res.screenWidth >= 380 && res
						.screenWidth <= 420 && res.pixelRatio == 3) {
						this.marginLeft = 123
						if (this.dataRedirectInfo.kuid) {

							this.marginLeft = 220
						}
					}
					if (res.screenHeight >= 900 && res.screenHeight <= 1024 && res.screenWidth >= 380 && res
						.screenWidth <= 770 && res.pixelRatio >= 2) {
						this.triangleTop = -16,
							this.triangleRight = 8
					}


				}
			})
		},
		computed: {
			// 主要目的就是为了适配rpx
			rpxToPx() {
				// 假设设计稿宽度是750px
				const designWidth = 750;
				// 获取当前屏幕宽度（uni.getSystemInfoSync()是uni-app提供的API）
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				// 计算转换比例
				const ratio = screenWidth / designWidth;
				// 返回转换函数
				return function(rpx) {
					return rpx * ratio + 'px';
				};
			}
		},
		methods: {
			// 显示修改删除按钮
			showDelModify(id) {


				this.activity_id = id
				// 显示下拉框
				this.$refs.modifyActivity.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},
			// 点击跳转到活动用户数据
			userDataFn(id, i) {

				uni.navigateTo({
					url: '/pages/index/userData'
				})


			},
			openQrCode(id, code, type) {
				if (type == 2) {
					// 如果渠道为视频号 那么需要跳转到活动页面参加活动
					if ( uni.getStorageSync('types') == 2) {
						// 那么需要获取到当前的id 跳转到活动页面进行视频号的转发
						uni.navigateTo({
							url: '/pages/index/previewPush?id=' + id
						})
					} else {
						uni.navigateTo({
							url: '/pages/index/videoCode?id=' + id
						})
					}
				} else {
					this.qrcode = code;
					this.$refs.pop.show({
						style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
						bottomClose: true,
						shadeClose: true,
						topclose: true
					});
				}





			},
			// 获取获取接口
			async activityDetailApi(id) {
				const result = await this.$http.post({
					url: this.$api.activityDetail,
					data: {
						activity_id: id,
					}
				});
				// 返回活动详情
				return result
			},



			// 跳转到详情页面
			openDetail(item) {
				console.log('详情页面', item)


				// 点击活动预览跳转到活动详情页面
				uni.navigateTo({
					url: '/pages/index/activeDetail?type=' + item.activityType + '&id=' + item.id +
						'&releaseChaannel' + item.releaseChaannel
				})


			},
			// 调用删除活动
			async delActivity(id) {
				const result = await this.$http.post({
					url: this.$api.activityDel,
					data: {
						activity_id: id,
					}
				});
				if (result.errno == 0) {
					this.$emit('delRefresh', result.errno);
					// 这里要提醒父组件进行刷新
				}
				this.$refs.modifyActivity.close();
				this.$sun.toast('活动删除成功')

			},
			// 修改
			async modify(id) {
				const result = await this.activityDetailApi(id)
				this.clip_type = result.data.clip_type
				this.$refs.modifyActivity.close()
				// 进行判断 project_count==0 并且 clip_type 类型是 123 的那么我们就弹出弹框是否需要生成视频
				console.log(result.data.project_count, result.data.clip_type)
				if (result.data.project_count == 0 && (Number(result.data.clip_type) == 1 || Number(result.data
						.clip_type) == 2 || Number(result.data.clip_type) == 3)) {
					// 当前{{什么类型的}}视频已用完，是否需要上传更多作品
					uni.showModal({
						title: '温馨提示',
						content: `当前${this.clip_typeList[Number(result.data.clip_type)-1]}视频已用完，是否需要上传更多作品`,
						success: async (res) => {
							if (res.confirm) {
								console.log(res.confirm);
								console.log(id)
								this.id = id

								this.$refs.createActivityVideo.show({
									anim: 'center',
									shadeClose: false, //false使用户不能点击其它关闭页面
									topclose: false
								});

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					//  如果 prize 有数组 有效时间 核销结束 核销开始 哪么就是type2  然后c_type有值就是type3
					if (result.errno == 0) {
						if (Number(result.data.type) == 2 || Number(result.data.type) == 5 || Number(result.data
								.type) == 3) {
							this.$sun.navGo(
								'/pages/luckyDraw/luckyDraw', {
									type: 2,
									activity_id: id,
								}
							)
						} else if (Number(result.data.type) == 4) {
							this.$sun.navGo(
								'/pages/luckyDraw/luckyDraw', {
									type: 3,
									activity_id: id,
								}
							)
						} else if (Number(result.data.type) == 1) {
							this.$sun.navGo(
								'/pages/luckyDraw/luckyDraw', {
									type: 1,
									activity_id: id,
								}
							)
						}
					} else if (result.errno == -1) {
						uni.showModal({
							title: '提示',
							content: result.message,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}



			},

			//中奖名单
			winning(id) {
				uni.navigateTo({
					url: '/pages/index/winning?id=' + id
				})
			},
			// 点击确认 调用生成视频数量接口
			async createVideoFn() {
				// 判断如果是云混剪/高级模板/多镜头普通模式 我们就调接口
				uni.showLoading({
					title: '努力加载中请稍等'
				});
				console.log(this.activity_id)
				const result = await this.$http.post({
					url: this.$api.activityVideo,
					data: {
						activity_id: String(this.id),
						clip_count: this.clip_count
					}
				});
				if (result.errno == 0) {

					uni.hideLoading();
					this.$sun.toast(result.message)
					this.$refs.createActivityVideo.close()
				} else {
					this.$sun.toast(result.message)
				}
			},
			// 取消回调
			cancalFn() {
				this.$refs.createActivityVideo.close()
			},
			// 根据不同的类型切换到不同的预览页面
			previewActivityFn(activityType, id) {
				console.log(activityType)
				// type为1跳转到活动详情页面
				if (activityType == 1 || activityType == 5) {
					uni.navigateTo({
						url: "/pages/index/previewPush?id=" + id + '&preview=' + activityType,
					})
				} else if (activityType == 2) {
					uni.navigateTo({
						url: "/pages/index/previewTurntable?id=" + id,
					})
				} else if (activityType == 3) {
					uni.navigateTo({
						url: "/pages/index/previewSquared?id=" + id,
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/previewCoupon?id=" + id,
					})
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	// flex布局的复用
	.flex() {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-center() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.qrcode-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.tips {
			margin-top: 20rpx;
		}
	}

	// 活动预览与 用户数据 字体复用
	.dataPur() {
		color: #6568F6;
		font-size: 28rpx;
		font-family: Inter;
		width: 354rpx;
		height: 92rpx;
	}

	.getnum() {
		width: 168rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #5F5D5D;
		font-size: 26rpx;
	}

	.moreActiveContian {
		border-radius: 10rpx;
		position: relative;

		width: 710rpx;
		background-color: #FFF;
		padding: 30rpx 44rpx var(--ContianPadding) 42.18rpx;
		margin-bottom: 20rpx;

		.moreTitle {
			color: #000;
			font-size: 28rpx;
			font-family: Inter;
			font-weight: 700;

			height: 34rpx;
			margin-bottom: 27.32rpx;
		}

		.v-createTime {
			.flex();

			.createTime {
				color: #5F5D5D;
				font-size: 24rpx;
			}

			.threeDot {
				width: 52rpx;
				height: 12rpx;
				padding: 8rpx;
			}

			.detailText {
				color: #6568F6;
				font-size: 24rpx;
				margin-top: -2px;
			}
		}

		.moreActiveList {

			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 56rpx;
			margin-left: -20rpx;

			.getNum {
				position: relative;
				display: flex;
				text-align: center;
				justify-content: space-between;

				.fsNum {
					&::after {
						content: "";
						display: block;
						font-size: 0;
						height: 70rpx;


						position: absolute;
						left: 167rpx;
						top: 15rpx;
						border: 2rpx solid #F7F7F7
					}

					.getnum();
				}

				.bfNum {
					&::after {
						content: "";
						display: block;
						font-size: 0;
						height: 70rpx;


						position: absolute;
						left: 335rpx;
						top: 15rpx;
						border: 2rpx solid #F7F7F7
					}

					.getnum();


				}

				.dzNum {

					.getnum();

					&::after {
						content: "";
						display: block;
						font-size: 0;
						height: 70rpx;

						position: absolute;
						left: 500rpx;
						top: 15rpx;
						border: 2rpx solid #F7F7F7
					}
				}

				.plNum {
					.getnum();

				}
			}


		}



		.moreActiveFooter {
			display: flex;
			text-align: center;
			line-height: 92rpx;

			margin-top: 36rpx;
			width: 705rpx;
			margin-left: -40rpx;

			.actionPur {

				border-right: 2rpx solid #F7F7F7;
				.dataPur()
			}

			.userData {

				.dataPur();
				border-right: 2rpx solid #F7F7F7;

			}

			.previewActivity {

				.dataPur()
			}


			// 线
			.absoluteSolid {
				width: 708rpx;
				height: 2rpx;
				position: absolute;
				top: var(--solidTop);
				left: 0rpx;
				background-color: rgba(247, 247, 247, 1);

			}

			.Solid {
				width: 708rpx;
				height: 2rpx;
				position: absolute;
				top: var(--activityTop);
				left: 0rpx;
				background-color: rgba(247, 247, 247, 1);
			}
		}

		.createVideoContainer {

			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 672rpx;
			height: 410rpx;
			border-radius: 20rpx !important;
			flex-shrink: 0;
			background-color: #FFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 48rpx 40rpx 48rpx 40rpx;

			.createVideoTop {
				display: flex;
				align-items: center;

				.createVideoText {
					color: #333;
					font-size: 36rpx;
					font-weight: 700;

				}
			}

			.createVideoConText {}

			.createVideoButtom {
				display: flex;
				justify-content: space-evenly;
				width: 100%;

				.sure {
					width: 160rpx;
					height: 60rpx;
					color: #FFF;
					border-radius: 4rpx;
					background: linear-gradient(180deg, #6568F6 0%, #1D6FEC 100%);
					text-align: center;
					line-height: 60rpx;
				}

				.cancal {
					border-radius: 4rpx;
					border: 2rpx solid #1E6CEB;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}

		}

		.activePoster {
			margin-top: 50rpx;

			.imgPoster {
				width: 206px;
				height: 38px;
			}


		}

		.moreActiveButton {


			background-color: #fff;


			.add {
				height: 100rpx;
				color: #6568F6;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rrpx2r2rp30r30rpx rgba(247, 247, 247, 1);
				.flex-center();
				border: 1px solid #f7f7f7;


			}

			.delete {
				.flex-center();
				height: 100rpx;


				color: #FF4636;
				font-size: 28rpx;
				font-family: Inter;
				box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
			}


		}
	}
</style>